(function(){
		const enter = document.querySelector('.index')
		const elevator = document.querySelector('.xtx-elevator')
		window.addEventListener('scroll',function(){
			const width_n = document.documentElement.scrollTop
			elevator.style.opacity = width_n>enter.offsetTop ? 1:0
		})
		const backTop = document.querySelector('#backTop')
		backTop.addEventListener('click',function(){
			// window.scrollTo(0,0)
			 window.scrollTo({ top: 0, behavior: 'smooth' });
		})
		
		const backBottom = document.querySelector('#backBottom')
		backBottom.addEventListener('click',function(){
			window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
		})
	})();
	
	(function(){
		const list = document.querySelector('.xtx-elevator-list')
		list.addEventListener('click', function (e) {
		  if (e.target.tagName === 'A' && e.target.dataset.name) {
		
			const old = document.querySelector('.xtx-elevator-list .active')
			if (old) 
				old.classList.remove('active')
			e.target.classList.add('active')
			const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
			// 让页面滚动到对应的位置
			// document.documentElement.scrollTop = top
			 window.scrollTo({ top: top, behavior: 'smooth' });
			// e.stopPropagation()
		  }
		})
		// 3. 页面滚动，可以根据大盒子选 小盒子 添加 active 类
		window.addEventListener('scroll', function () {
		  const old = document.querySelector('.xtx-elevator-list .active')
		  if (old) old.classList.remove('active')
		  const news = document.querySelector('.xtx_goods_new')
		  const popular = document.querySelector('.xtx_goods_popular')
		  const brand = document.querySelector('.xtx_goods_brand')
		  const topic = document.querySelector('.xtx_goods_topic')
		  const n = document.documentElement.scrollTop
		  if (n >= news.offsetTop && n < popular.offsetTop) {
			// 选择第一个小盒子
				  //[data-name=topic]属性选择器
			document.querySelector('[data-name=new]').classList.add('active')
		  } else if (n >= popular.offsetTop && n < brand.offsetTop) {
			document.querySelector('[data-name=popular]').classList.add('active')
		  } else if (n >= brand.offsetTop && n < topic.offsetTop) {
			document.querySelector('[data-name=brand]').classList.add('active')
		  } else if (n >= topic.offsetTop) {
			document.querySelector('[data-name=topic]').classList.add('active')
		  }
		})
	})();